<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{
            width: 250px;
            height: 250px;
            background-color: paleturquoise;
            margin: 250px auto;
        } */

        .parent {
            width: 500px;
            height: 500px;
            border: 2px solid;
            display: flex;
            align-items: flex-start;
        }

        .parent>section {
            width: 100px;
            height: 100px;
        }

        /* .parent>section:first-child {
            background-color: palegoldenrod;
        } */
        /* 
         数字
         odd even
         an+b
         前三个：-n+3
         */
        .parent>section:nth-child(odd) {
            background-color: aqua;
        }

        .parent>section:nth-child(even) {
            background-color: palegreen;
        }

        .parent>section:nth-of-type(3) {
            /* 操作某一个子元素的垂直对齐方式 */
            align-self: flex-end;
        }

        .father {
            width: 500px;
            height: 500px;
            border: 2px solid;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .father>section {
            width: 90px;
            height: 90px;
        }
        .father>section:nth-child(odd){
            background-color: palegreen;
        }
        .father>section:nth-child(even){
            background-color: pink;
        }
    </style>
</head>

<body>

    <!-- <div>

    </div> -->

    <div class="parent">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </div>



    <div class="father">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </div>
    <script>
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < 5; j++) {
                if (i == 3) {
                    continue;
                }
                console.log(i);
                //00000
                //11111
                //22222
                //44444
            }


        }

        console.log('123' - 10);
        console.log('123' + 10);
        console.log(10 + true);
        console.log(10 + null);
        //    if(10){

        //    }
        console.log(isNaN('10'));//Number('10')
        console.log(Number('10'));//10
        console.log(Number('10a'));//NaN
        console.log(Number('10.23'));//10.23


        // let div=document.getElementsByTagName('div')[0];
        // console.log(div.offsetLeft,div.offsetTop);

    </script>

</body>

</html>